<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户登录注册</title>
  <link rel="stylesheet" href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
  <style>
    /* 全局样式 */
    body {
      background: linear-gradient(to bottom right, #e6f0ff, #d0e6f6);
      font-family: 'Poppins', sans-serif;
      color: #333;
      min-height: 100vh;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 15px;
    }

    /* 表单容器样式 */
    .custom-form {
      background: #fff;
      color: #333;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      padding: 30px 25px;
      width: 100%;
      max-width: 400px;
      animation: fadeIn 1s ease-in-out;
    }

    /* 标题样式 */
    .custom-form h2 {
      text-align: center;
      margin-bottom: 20px;
      font-weight: 600;
      color: #333;
    }

    /* 输入框样式 */
    .form-control {
      border-radius: 20px;
      padding: 12px 15px;
      box-shadow: none;
      border: 1px solid #ddd;
      transition: all 0.3s ease;
    }

    .form-control:focus {
      border-color: #6a11cb;
      box-shadow: 0 0 5px rgba(106, 17, 203, 0.5);
    }

    /* 按钮样式 */
    .btn {
      border-radius: 25px;
      padding: 10px 15px;
      font-size: 16px;
      font-weight: 500;
      background: linear-gradient(to right, #6a11cb, #2575fc);
      color: #fff;
      border: none;
      transition: all 0.3s ease;
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(106, 17, 203, 0.3);
    }

    .btn-success {
      background: linear-gradient(to right, #34c759, #30c270);
    }

    /* Tab 样式 */
    .nav-tabs {
      border-bottom: none;
      justify-content: center;
      margin-bottom: 15px;
    }

    .nav-tabs .nav-link {
      border-radius: 15px;
      background: rgba(240, 240, 240, 0.9);
      margin: 0 5px;
      font-size: 15px;
      color: #333;
      transition: all 0.3s ease;
    }

    .nav-tabs .nav-link.active {
      background: #6a11cb;
      color: #fff;
    }

    /* Logo 样式 */
    .logo {
      text-align: center;
      margin-bottom: 15px;
    }

    .logo img {
      width: 80px;
      height: auto;
      animation: bounce 2s infinite;
    }

    /* 动画效果 */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-10px);
      }
      60% {
        transform: translateY(-5px);
      }
    }
  </style>
</head>
<body>
<div class="custom-form">
  <div class="logo">
    <img src="logo.jpg" alt="Logo"> <!-- 替换为你的logo路径 -->
  </div>
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">登录</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="register-tab" data-toggle="tab" href="#register" role="tab" aria-controls="register" aria-selected="false">注册</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <!-- 登录表单 -->
    <div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
      <h2>登录</h2>
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" class="form-control" id="username" placeholder="请输入用户名">
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" placeholder="请输入密码">
      </div>
      <div class="form-group">
        <button type="submit" id="login_submit" class="btn btn-primary btn-block">登录</button>
      </div>
    </div>
    <!-- 注册表单 -->
    <div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
      <h2>注册</h2>
      <div class="form-group">
        <label for="registerUsername">用户名</label>
        <input type="text" class="form-control" id="registerUsername" placeholder="请输入用户名">
      </div>
      <div class="form-group">
        <label for="registerPassword">密码</label>
        <input type="password" class="form-control" id="registerPassword" placeholder="请输入密码">
      </div>
      <div class="form-group">
        <label for="registerConfirmPassword">确认密码</label>
        <input type="password" class="form-control" id="registerConfirmPassword" placeholder="请再次输入密码">
      </div>
      <div class="form-group">
        <button type="submit" id="register_submit" class="btn btn-success btn-block">注册</button>
      </div>
    </div>
  </div>
</div>

<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
  // 登录功能
  $("#login_submit").click(function () {
    const username = $("#username").val();
    const password = $("#password").val();

    if (!username || !password) {
      Swal.fire({
        icon: "warning",
        title: "信息不完整",
        text: "请填写完整信息后再登录！",
        confirmButtonText: "好的"
      });
      return;
    }

    $.post("http://localhost:8080/user/login", { username, password }, function (response) {
      if (response) {
        Swal.fire({
          icon: "success",
          title: "登录成功",
          text: "欢迎回来！",
          showConfirmButton: false,
          timer: 2000
        }).then(() => {
          window.location.href = "index.html";
        });
      } else {
        Swal.fire({
          icon: "error",
          title: "登录失败",
          text: "用户名或密码错误，请重试。",
          confirmButtonText: "重新输入"
        });
      }
    });
  });

  $("#register_submit").click(function () {
    const username = $("#registerUsername").val();
    const password = $("#registerPassword").val();
    const confirmPassword = $("#registerConfirmPassword").val();

    if (!username || !password || !confirmPassword) {
      Swal.fire({
        icon: "warning",
        title: "信息不完整",
        text: "请填写完整信息后再注册！",
        confirmButtonText: "好的"
      });
      return;
    }

    if (password !== confirmPassword) {
      Swal.fire({
        icon: "error",
        title: "密码不一致",
        text: "两次输入的密码不一致，请重新输入！",
        confirmButtonText: "重新输入"
      });
      return;
    }

    $.post("http://localhost:8080/user/register", { username, password }, function (response) {
      if (response) {
        Swal.fire({
          icon: "success",
          title: "注册成功",
          text: "欢迎加入！",
          showConfirmButton: false,
          timer: 2000
        }).then(() => {
          window.location.href = "login.html";
        });
      } else {
        Swal.fire({
          icon: "error",
          title: "注册失败",
          text: "请稍后再试。",
          confirmButtonText: "好的"
        });
      }
    });
  });
</script>
</body>
</html>
